<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no" />
		<title>index</title>
		<link rel="stylesheet" type="text/css" href="boot/dist/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />

		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="boot/dist/js/bootstrap.bundle.min.js"></script>
		<script src="js/popper.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="boot/dist/js/bootstrap.js"></script>
		<script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="owl.carousel.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="style.1.css" />
		<link rel="stylesheet" type="text/css" href="owl.carousel2.min.css" />

	</head>
	<body>
		<div class="header1">
			<div class="container">
				<div class="row">
					<div class="col-lg-2 col-12 text-center py-4 h_py">
						<a href="javascript:;">
							<img src="img/logo-header-05.png">
						</a>
					</div>
					<div class="col-lg-7 col-12 py-4 h_py1">
						<form class="h_col form-control border-0 d-flex justify-content-between align-items-center rounded-pill" style=" height: 50px;">
							<!--2.2设置菜单项  nav-item 下拉菜单的区域 dropdown-->
							<span class="nav-item dropdown h_w">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link h_bor" data-toggle="dropdown">MOVIES<i class="fa fa-angle-down pl-2"></i></a>

								<!--2.设置下拉菜单-->
								<span class="dropdown-menu h_col">
									<a href="#" class="dropdown-item">HOME</a>
									<a href="#" class="dropdown-item">VIDEOS</a>
									<a href="#" class="dropdown-item">FEATURES</a>
									<a href="#" class="dropdown-item">BLOG</a>
									<a href="#" class="dropdown-item">CONTACT</a>
								</span>

							</span>
							<input type="text" placeholder="Search for a Movie..." class="border-0 w-75 pl-4 h_input" style="outline: none;">
							<button type="" class="border-0 btn"><i class="fa fa-search h_btn"></i></button>
						</form>
					</div>
					<div class="col-lg-3 col-12 py-4 d-flex align-items-center h_ul">
						<ul class="list-unstyled mb-0 d-flex justify-content-around j align-items-center w-100">
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-facebook fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-twitter fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-vimeo fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-youtube-play fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-google-plus fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-file-movie-o fa_h"></i></a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- 导航栏区域 -->
		<div class="h_nav h-auto py-2 ">
			<!-- navbar-expand-md -->
			<div class="container d-flex justify-content-between align-items-center h_a">
				<div class="navbar p-0 navbar-expand-md h_center">
					<button type="button" class="btn navbar h_btnbg" data-toggle="collapse" data-target="#meu">
						<i class="fa fa-bars"></i>
					</button>
					<i class="border-right mx-3 h_hr" style="height: 30px;"></i>
					<div class="collapse navbar-collapse" id="meu">
						<ul class="nav list-unstyled d-flex text-center mx-auto justify-content-around justify-content-center navbar-nav h_bgg">
							<li class="">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link" data-toggle="dropdown">MOME</a>
								<span class="nav-item dropdown float-left w-100">
									<!--2.设置下拉菜单-->
									<span class="dropdown-menu h_li">
										<a href="index.html" class="dropdown-item">index</a>
									</span>
								</span>
							</li>

							<li class="">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link" data-toggle="dropdown">MOVIE</a>
								<span class="nav-item dropdown float-left w-100 ">

									<!--2.设置下拉菜单-->
									<span class="dropdown-menu h_li">
										<a href="shop.html" class="dropdown-item">Shop</a>
										<a href="shop_details.html" class="dropdown-item">shop_details</a>
									</span>

								</span>
							</li>

							<li class="">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link" data-toggle="dropdown">VIDEOS</a>
								<span class="nav-item dropdown float-left w-100">

									<!--2.设置下拉菜单-->
									<!--2.设置下拉菜单-->
									<span class="dropdown-menu h_li">
										<a href="video.html" class="dropdown-item">Video</a>
										<a href="video_details.html" class="dropdown-item">video_details</a>
									</span>
								</span>
							</li>

							<li class="">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link" data-toggle="dropdown">FEATURES</a>
								<span class="nav-item dropdown float-left w-100">

									<!--2.设置下拉菜单-->
									<!--2.设置下拉菜单-->
									<span class="dropdown-menu h_li">
										<a href="about.html" class="dropdown-item">About</a>
										<a href="submit.html" class="dropdown-item">Submit</a>
										<a href="authors.html" class="dropdown-item">list_authors</a>
										<a href="authors_details.html" class="dropdown-item">authors_details</a>
									</span>
								</span>
							</li>

							<li class="">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link" data-toggle="dropdown">BLOG</a>
								<span class="nav-item dropdown float-left w-100">

									<!--2.设置下拉菜单-->
									<span class="dropdown-menu h_li">
										<a href="blog.html" class="dropdown-item">Blog</a>
										<a href="blog_details.html" class="dropdown-item">blog_detail</a>

									</span>
								</span>
							</li>

							<li class="">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link" data-toggle="dropdown">CONTACT</a>
								<span class="nav-item dropdown float-left w-100">

									<!--2.设置下拉菜单-->
									<span class="dropdown-menu h_li">
										<a href="contact.html" class="dropdown-item">CONTACT</a>
									</span>
								</span>
							</li>
						</ul>
					</div>

				</div>
				<!-- 两个图标 -->
				<div class="h_a">
					<a href="javascript:;">
						<i class="fa fa-cloud-upload"></i>
						<span>SUBMIT VIDED</span>
					</a>
					<i class="border-right mx-3"></i>
					<a href="javascript:;">
						<i class="fa fa-user"></i>
						<span>IOGIN</span>
					</a>
				</div>
			</div>
		</div>
		<!-- 中部飞马区域 -->
		<div class="m_bg" id="mbg">
			<div style="background-color: rgba(0,0,0,0.8); overflow: hidden;">
				<div class="container">
					<div class="row m_h">
						<div id="video_container" class="col-lg-9 w-100 h-100 col-12 m_bg_size">
							<div class="overflow-hidden"><img src="img/bg-featurepost-01.jpg" class="w-100 m_img_f"></div>
							<img src="img/star-01.png" class="m_img_x">
							<span class="text-white m_size">5</span>
							<h5 class="m_img_h text-white">IMDb</h5>
							<span class="m_img_p text-white">HDRip</span>
							<img src="img/icon-play-02.png" vidSrc="videos/aa.mp4" class="m_img_b iconbo vid htmlvid">
						</div>
						<div class="col-lg-3 col-12">
							<div class="py-4">
								<h5 class="text-white">MTV Game Awards GraphicPackage The Best Of year 2018</h5>
								<p class="m_col">RY POHY · MAY1，2018 · TV SHOW</p>
								<p class="m_col py-3">S1 E2 Escorpion/DzecThe one Mayans seek answers form a local crew as the Galindo you
									worlds north and south of the border oldcollide</p>
								<a href="javascript:;" class="m_a rounded-pill">READ MORE</a>
							</div>
						</div>
					</div>
					<!-- 四个小图片区域 -->
					<div class="row pt-3 pb-5">
						<div class="col-lg-3 col-md-6 col-12">
							<div class="overflow-hidden">
								<img src="img/png-bg-post-01.png" class="w-100 m_img" />
							</div>
							<span class="m_img_k text-white">HD</span>
							<h5 class="text-white text-center pt-3 mb-0">Self-Hosted Video</h5>
							<p class="text-center py-1 m_p">FEBRUARY 10，2018</p>
						</div>
						<div class="col-lg-3 col-md-6 col-12">
							<div class="overflow-hidden">
								<img src="img/png-bg-post-02.png" class="w-100 m_img" />
							</div>
							<span class="m_img_k text-white">CAM</span>
							<h5 class="text-white text-center pt-3 mb-0">Self-Hosted Video</h5>
							<p class="text-center py-1 m_p">FEBRUARY 10，2018</p>
						</div>
						<div class="col-lg-3 col-md-6 col-12">
							<div class="overflow-hidden">
								<img src="img/png-bg-post-03.png" class="w-100 m_img" />
							</div>
							<span class="m_img_k text-white">Trailer</span>
							<h5 class="text-white text-center pt-3 mb-0">Self-Hosted Video</h5>
							<p class="text-center py-1 m_p">FEBRUARY 10，2018</p>
						</div>
						<div class="col-lg-3 col-md-6 col-12">
							<div class="overflow-hidden">
								<img src="img/png-bg-post-04.png" class="w-100 m_img" />
							</div>
							<span class="m_img_k text-white">HD</span>
							<h5 class="text-white text-center pt-3 mb-0">Self-Hosted Video</h5>
							<p class="text-center py-1 m_p">FEBRUARY 10，2018</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 中部视频播放表单区域 -->
		<div class="m_POP" id="app">
			<div class="container">
				<div class="d-flex justify-content-between flex-lg-row flex-column m_dapp">
					<h5 class="text-white ">POPULAR VIDEOS<span class="m_h5"></span><span class="text-danger m_span">See oll news</span></h5>
					<div>
						<button type="button" class="btn text-white fa fa-angle-left m_size_tu" @click="typepaven"></button><span class="m_h5"></span><button
						 type="button" class="btn text-white m_span fa fa-angle-right m_size_tu" @click="typeone"></button>
					</div>
				</div>
				<hr class="" style="background-color: gray;" />
				<template v-if="type==1">
					<div class="row">
						<div class="col-lg-3 col-md-6 col-12  py-4">
							<div class="divv overflow-hidden">
								<img src="img/post-01.jpg" height="350" class="w-100 m_img_xiao" />
								<img src="img/star-01.png" class="x">
								<span class="text-white wu">5</span>
								<h5 class="h text-white">IMDb</h5>
								<span class="aa text-white">Hot</span>
								<div class="m_img_bg_col"></div>
								<img src="img/icon-play-01.png" class="m_img_bo">
							</div>
							<h5 class="text-white text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
							<p class="text-center py-1 m_p">ACTION，DRAMA</p>
						</div>
						<div class="col-lg-3 col-md-6 col-12  py-4">
							<div class="divv overflow-hidden">
								<img src="img/post-02.jpg" height="350" class="w-100 m_img_xiao" />
								<img src="img/star-01.png" class="x">
								<span class="text-white wu">5</span>
								<h5 class="h text-white">IMDb</h5>
								<span class="aa text-white">Hot</span>
								<div class="m_img_bg_col"></div>
								<img src="img/icon-play-01.png" class="m_img_bo">
							</div>
							<h5 class="text-white text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
							<p class="text-center py-1 m_p">ACTION，DRAMA</p>
						</div>
						<div class="col-lg-3 col-md-6 col-12  py-4">
							<div class="divv overflow-hidden">
								<img src="img/post-03.jpg" height="350" class="w-100 m_img_xiao" />
								<img src="img/star-01.png" class="x">
								<span class="text-white wu">5</span>
								<h5 class="h text-white">IMDb</h5>
								<span class="aa text-white">Hot</span>
								<div class="m_img_bg_col"></div>
								<img src="img/icon-play-01.png" class="m_img_bo">
							</div>
							<h5 class="text-white text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
							<p class="text-center py-1 m_p">ACTION，DRAMA</p>
						</div>
						<div class="col-lg-3 col-md-6 col-12  py-4">
							<div class="divv overflow-hidden">
								<img src="img/post-04.jpg" height="350" class="w-100 m_img_xiao" />
								<img src="img/star-01.png" class="x">
								<span class="text-white wu">5</span>
								<h5 class="h text-white">IMDb</h5>
								<span class="aa text-white">Hot</span>
								<div class="m_img_bg_col"></div>
								<img src="img/icon-play-01.png" class="m_img_bo">
							</div>
							<h5 class="text-white text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
							<p class="text-center py-1 m_p">ACTION，DRAMA</p>
						</div>
					</div>
				</template>
				<template v-if="type==2">
					<div class="row">
						<div class="col-lg-3 col-md-6 col-12  py-4">
							<div class="divv overflow-hidden">
								<img src="img/post-05.jpg" height="350" class="w-100 m_img_xiao" />
								<img src="img/star-01.png" class="x">
								<span class="text-white wu">5</span>
								<h5 class="h text-white">IMDb</h5>
								<span class="aa text-white">Hot</span>
								<div class="m_img_bg_col"></div>
								<img src="img/icon-play-01.png" class="m_img_bo">
								 
							</div>
							<h5 class="text-white text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
							<p class="text-center py-1 m_p">ACTION，DRAMA</p>
						</div>
						<div class="col-lg-3 col-md-6 col-12  py-4">
							<div class="divv overflow-hidden">
								<img src="img/post-06.jpg" height="350" class="w-100 m_img_xiao" />
								<img src="img/star-01.png" class="x">
								<span class="text-white wu">5</span>
								<h5 class="h text-white">IMDb</h5>
								<span class="aa text-white">Hot</span>
								<div class="m_img_bg_col"></div>
								<img src="img/icon-play-01.png" class="m_img_bo">
							</div>
							<h5 class="text-white text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
							<p class="text-center py-1 m_p">ACTION，DRAMA</p>
						</div>
						<div class="col-lg-3 col-md-6 col-12  py-4">
							<div class="divv overflow-hidden">
								<img src="img/post-07.jpg" height="350" class="w-100 m_img_xiao" />
								<img src="img/star-01.png" class="x">
								<span class="text-white wu">5</span>
								<h5 class="h text-white">IMDb</h5>
								<span class="aa text-white">Hot</span>
								<div class="m_img_bg_col"></div>
								<img src="img/icon-play-01.png" class="m_img_bo">
							</div>
							<h5 class="text-white text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
							<p class="text-center py-1 m_p">ACTION，DRAMA</p>
						</div>
						<div class="col-lg-3 col-md-6 col-12  py-4">
							<div class="divv overflow-hidden">
								<img src="img/post-08.jpg" height="350" class="w-100 m_img_xiao" />
								<img src="img/star-01.png" class="x">
								<span class="text-white wu">5</span>
								<h5 class="h text-white">IMDb</h5>
								<span class="aa text-white">Hot</span>
								<div class="m_img_bg_col"></div>
								<img src="img/icon-play-01.png" class="m_img_bo">
							</div>
							<h5 class="text-white text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
							<p class="text-center py-1 m_p">ACTION，DRAMA</p>
						</div>
					</div>
				</template>
				<template v-if="type==3">
					<div class="row">
						<div class="col-lg-3 col-md-6 col-12  py-4">
							<div class="divv overflow-hidden">
								<img src="img/post-09.jpg" height="350" class="w-100 m_img_xiao" />
								<img src="img/star-01.png" class="x">
								<span class="text-white wu">5</span>
								<h5 class="h text-white">IMDb</h5>
								<span class="aa text-white">Hot</span>
								<div class="m_img_bg_col"></div>
								<img src="img/icon-play-01.png" class="m_img_bo">
							</div>
							<h5 class="text-white text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
							<p class="text-center py-1 m_p">ACTION，DRAMA</p>
						</div>
						<div class="col-lg-3 col-md-6 col-12  py-4">
							<div class="divv overflow-hidden">
								<img src="img/post-10.jpg" height="350" class="w-100 m_img_xiao" />
								<img src="img/star-01.png" class="x">
								<span class="text-white wu">5</span>
								<h5 class="h text-white">IMDb</h5>
								<span class="aa text-white">Hot</span>
								<div class="m_img_bg_col"></div>
								<img src="img/icon-play-01.png" class="m_img_bo">
							</div>
							<h5 class="text-white text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
							<p class="text-center py-1 m_p">ACTION，DRAMA</p>
						</div>
						<div class="col-lg-3 col-md-6 col-12  py-4">
							<div class="divv overflow-hidden">
								<img src="img/post-11.jpg" height="350" class="w-100 m_img_xiao" />
								<img src="img/star-01.png" class="x">
								<span class="text-white wu">5</span>
								<h5 class="h text-white">IMDb</h5>
								<span class="aa text-white">Hot</span>
								<div class="m_img_bg_col"></div>
								<img src="img/icon-play-01.png" class="m_img_bo">
							</div>
							<h5 class="text-white text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
							<p class="text-center py-1 m_p">ACTION，DRAMA</p>
						</div>
						<div class="col-lg-3 col-md-6 col-12  py-4">
							<div class="divv overflow-hidden">
								<img src="img/post-12.jpg" height="350" class="w-100 m_img_xiao" />
								<img src="img/star-01.png" class="x">
								<span class="text-white wu">5</span>
								<h5 class="h text-white">IMDb</h5>
								<span class="aa text-white">Hot</span>
								<div class="m_img_bg_col"></div>
								<img src="img/icon-play-01.png" class="m_img_bo">
							</div>
							<h5 class="text-white text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
							<p class="text-center py-1 m_p">ACTION，DRAMA</p>
						</div>
					</div>
				</template>
				<!-- 视频播放下的表单 -->
				<div class="" style="background: url(img/ads-01.jpg) no-repeat; background-size: cover; overflow: hidden; ">
					<div class="" style="background-color: rgba(0,0,0,0.5); background-size: cover; overflow: hidden;  ">
						<div class="d-flex py-4 px-2 justify-content-between align-items-center flex-lg-row flex-column m_text">
							<span class="text-white " style="font-size: 20px;">GAME SHOW Art line Collection Handmade</span>
							<a href="javascript:;" class="m_img_a rounded-pill">READ MORE</a>
						</div>
					</div>
				</div>
				<!-- 轮播图区域上的标题 -->
				<div class="pt-5 d-flex align-items-center">
					<hr class="m_hr" style="width: 35%; background-color: gray;" />
					<h5 class="text-white text-center">TRENOING CATEGORIES</h5>
					<hr class="bg-white m_hr" style="width: 35%; background-color: gray !important;" />
				</div>
				<p class="text-center pb-4" style="color: gray;">it is a long ostablished fact that a reader</p>


				<!-- 轮播图区域 -->
				<div class="warpper">
					<div class="carousel owl-carousel">
						<div class="card  img_lbt">
							<img src="img/post-05.jpg">
							<div>
								<h4 class=" text_lbt"></h4>
							</div>
						</div>
						<div class="card  ">
							<img src="img/post-06.jpg">
						</div>
						<div class="card ">
							<img src="img/post-07.jpg">
						</div>
						<div class="card  ">
							<img src="img/post-08.jpg">
						</div>
						<div class="card  ">
							<img src="img/post-01.jpg">
						</div>
					</div>
				</div>

				<!-- 冰人区域 -->
				<div class="row pt-3">
					<div class="col-md-6 col-12 py-2">
						<h5 class="text-white ">LATEST VIDEOS<span class="m_h5"></span><span class="text-danger m_span">See oll news</span></h5>
					</div>
					<div class="col-md-6 col-12 py-2">
						<ul class="list-unstyled d-flex justify-content-around flex-wrap m_li" style="color: gray;">
							<li class="text-danger">CINEMA</li>
							<li>·</li>
							<li>MUSIC</li>
							<li>·</li>
							<li>SPORT</li>
							<li>·</li>
							<li>TECH</li>
							<li>·</li>
							<li>FASHION</li>
							<li>·</li>
							<li>ANIMATION</li>
						</ul>
					</div>
					<!-- 下划线 -->
					<hr style="width: 100%; background-color: gray; margin-top: 0px;" />
				</div>
				<!-- 雪人 -->
				<div class="row">
					<div class="col-lg-5 col-12 py-5">
						<div class="divv" style="padding: 15px 0px 15px 0px;">
							<div class="overflow-hidden"><img src="img/bg-featurepost-02.jpg" height="610" class="w-100 m_img_xiao"></div>
							<img src="img/star-01.png" class="x">
							<span class="text-white wu">5</span>
							<h5 class="h text-white">IMDb</h5>
							<span class="aa text-white">NEW</span>
							<!-- 文字区域 -->
							<h5 class="m_font text-white">MTV Game Awards Graphic</h5>
							<h5 class="m_font_1 text-white">Package The Best Of year 2018</h5>
							<p class="m_font_p" style="color: gray;">BY POLLY · MAY1，2018</p>
							<p class="m_font_pp" style="color: gray;">S1 E2 Escorpion/Dzec The one Mayans seek</p>
							<p class="m_font_ppp" style="color: gray;">answers from a local crew as the Galindo you</p>
							<p class="m_font_pppp" style="color: gray;">worlds north and south of the border.</p>
							<a href="javascript:;" class="m_aa rounded-pill">READ MORE</a>
						</div>
					</div>
					<div class="col-lg-7 col-12 py-5">
						<div class="row">
							<div class="col-lg-4 col-6 m_hover">	
								<div class="divv" style="padding: 15px 0px 15px 0px;">
									<div class="overflow-hidden">
									<img src="img/post-08.jpg" height="290" class="w-100 m_img_xiao" /></div>
									<img src="img/star-01.png" class="x">
									<span class="text-white wu">5</span>
									<h5 class="h text-white">IMDb</h5>
									<span class="aa text-white">Hot</span>
									<div class="m_img_bg_col"></div>
									
								</div>
							</div>
							
							<div class="col-lg-4 col-6 m_hover overflow-hidden">
								<div class="divv" style="padding: 15px 0px 15px 0px;">
									<div class="overflow-hidden">
									<img src="img/post-09.jpg" height="290" class="w-100 m_img_xiao" /></div>
									<img src="img/star-01.png" class="x">
									<span class="text-white wu">5</span>
									<h5 class="h text-white">IMDb</h5>
									<span class="aa text-white">Hot</span>
									<div class="m_img_bg_col"></div>
									
								</div>
							</div>
							<div class="col-lg-4 col-6 m_hover overflow-hidden">
								<div class="divv" style="padding: 15px 0px 15px 0px;">
									<div class="overflow-hidden">
									<img src="img/post-10.jpg" height="290" class="w-100 m_img_xiao" /></div>
									<img src="img/star-01.png" class="x">
									<span class="text-white wu">5</span>
									<h5 class="h text-white">IMDb</h5>
									<span class="aa text-white">Hot</span>
									<div class="m_img_bg_col"></div>
									
								</div>
							</div>
							<div class="col-lg-4 col-6 m_hover overflow-hidden">
								<div class="divv" style="padding: 15px 0px 15px 0px;">
									<div class="overflow-hidden">
									<img src="img/post-12.jpg" height="290" class="w-100 m_img_xiao" /></div>
									<img src="img/star-01.png" class="x">
									<span class="text-white wu">5</span>
									<h5 class="h text-white">IMDb</h5>
									<span class="aa text-white">Hot</span>
									<div class="m_img_bg_col"></div>
									
								</div>
							</div>
							<div class="col-lg-4 col-6 m_hover overflow-hidden">
								<div class="divv" style="padding: 15px 0px 15px 0px;">
									<div class="overflow-hidden">
									<img src="img/post-13.jpg" height="290" class="w-100 m_img_xiao" /></div>
									<img src="img/star-01.png" class="x">
									<span class="text-white wu">5</span>
									<h5 class="h text-white">IMDb</h5>
									<span class="aa text-white">Hot</span>
									<div class="m_img_bg_col"></div>
									
								</div>
							</div>
							<div class="col-lg-4 col-6 m_hover overflow-hidden">
								<div class="divv" style="padding: 15px 0px 15px 0px;">
									<div class="overflow-hidden">
									<img src="img/post-14.jpg" height="290" class="w-100 m_img_xiao" /></div>
									<img src="img/star-01.png" class="x">
									<span class="text-white wu">5</span>
									<h5 class="h text-white">IMDb</h5>
									<span class="aa text-white">Hot</span>
									<div class="m_img_bg_col"></div>
									
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 中部区域最后的标题栏图片区域 -->
				<div class="py-5">
					<div class="" style="background: url(img/ads-01.jpg) no-repeat; background-size: cover; overflow: hidden; ">
						<div class="" style="background-color: rgba(0,0,0,0.5); background-size: cover; overflow: hidden;  ">
							<div class=" py-4 px-2 align-items-center">
								<p align="center" style="font-size: 20px; color: white; margin: 0px;">GAME SHOW Art line Collection Handmade</p>
							</div>
						</div>
					</div>
				</div>

				<!-- 小熊底部区域 -->
				<div class="d-flex justify-content-between flex-lg-row flex-column m_dapp">
					<h5 class="text-white ">NEWS FEEO<span class="m_h5"></h5>
					<div>
						<button type="button" class="btn text-white fa fa-angle-left m_size_tu" @click="datef"></button><span class="m_h5"></span><button
						 type="button" class="btn text-white m_span fa fa-angle-right m_size_tu" @click="datet"></button>
					</div>
				</div>
				<hr class="" style="background-color: gray;">

				<!-- 小熊区域 -->
				<template v-if="date==1">
					<div class="row " style="padding: 25px 0px 70px 0px;">
						<div class="col-lg-6 col-12 my-3">
							<div class="overflow-hidden"><img src="img/bg-featurepost-03.jpg" class="w-100 m_img_xio" />
								<h5 class="text-white m_img_xio_h5">6 Products Designed to Make Trend </h5>
								<h5 class="text-white m_img_xio_h5_2">Ombre Makeup Simple</h5>
								<p style="color: gray;" class="m_img_xio_p">BY POLLY · MAY1，2018 · ANIMATION</p>
							</div>
						</div>

						<div class="col-lg-6 col-12">
							<div class="row">
								<div class="col-12">
									<div class="row">
										<div class="col-5 my-3">
											<div class="overflow-hidden">
												<img src="img/post-14.jpg" class="w-100 m_img_xiao">
											</div>
										</div>
										<div class="col-7 my-3">
											<span class="text-danger">MAY1，2018</span>
											<h5 class="text-white my-1">The Dark Tower Trailer</h5>
											<p style="color: gray;" class="my-3">To start he day in the best war，enjoythe extraordinary
												buffetbreakfast
												in the our courtyard caressed at auctor.</p>
										</div>
									</div>
								</div>
								<div class="col-12 ">
									<div class="row ">
										<div class="col-5">
											<div class="overflow-hidden">
												<img src="img/post-15.jpg" class="w-100 m_img_xiao">
											</div>
										</div>
										<div class="col-7">
											<span class="text-danger">MAY1，2018</span>
											<h5 class="text-white my-1">The Dark Tower Trailer</h5>
											<p style="color: gray;" class="my-3">To start he day in the best war，enjoythe extraordinary
												buffetbreakfast
												in the our courtyard caressed at auctor.</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</template>
				<template v-if="date==2">
					<div class="row " style="padding: 25px 0px 70px 0px;">
						<div class="col-lg-6 col-12 my-3">
							<div class="overflow-hidden"><img src="img/bg-featurepost-04.jpg" class="w-100 m_img_xio" />
								<h5 class="text-white m_img_xio_h5">6 Products Designed to Make Trend </h5>
								<h5 class="text-white m_img_xio_h5_2">Ombre Makeup Simple</h5>
								<p style="color: gray;" class="m_img_xio_p">BY POLLY · MAY1，2018 · ANIMATION</p>
							</div>
						</div>

						<div class="col-lg-6 col-12">
							<div class="row">
								<div class="col-12">
									<div class="row">
										<div class="col-5 my-3">
											<div class="overflow-hidden">
												<img src="img/post-19.jpg" class="w-100 m_img_xiao">
											</div>
										</div>
										<div class="col-7 my-3">
											<span class="text-danger">MAY1，2018</span>
											<h5 class="text-white my-1">The Dark Tower Trailer</h5>
											<p style="color: gray;" class="my-3">To start he day in the best war，enjoythe extraordinary
												buffetbreakfast
												in the our courtyard caressed at auctor.</p>
										</div>
									</div>
								</div>
								<div class="col-12 ">
									<div class="row ">
										<div class="col-5">
											<div class="overflow-hidden">
												<img src="img/post-20.jpg" class="w-100 m_img_xiao">
											</div>
										</div>
										<div class="col-7">
											<span class="text-danger">MAY1，2018</span>
											<h5 class="text-white my-1">The Dark Tower Trailer</h5>
											<p style="color: gray;" class="my-3">To start he day in the best war，enjoythe extraordinary
												buffetbreakfast
												in the our courtyard caressed at auctor.</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</template>
				<template v-if="date==3">
					<div class="row " style="padding: 25px 0px 70px 0px;">
						<div class="col-lg-6 col-12 my-3">
							<div class="overflow-hidden"><img src="img/bg-featurepost-06.jpg" class="w-100 m_img_xio" />
								<h5 class="text-white m_img_xio_h5">6 Products Designed to Make Trend </h5>
								<h5 class="text-white m_img_xio_h5_2">Ombre Makeup Simple</h5>
								<p style="color: gray;" class="m_img_xio_p">BY POLLY · MAY1，2018 · ANIMATION</p>
							</div>
						</div>

						<div class="col-lg-6 col-12">
							<div class="row">
								<div class="col-12">
									<div class="row">
										<div class="col-5 my-3">
											<div class="overflow-hidden">
												<img src="img/post-24.jpg" class="w-100 m_img_xiao">
											</div>
										</div>
										<div class="col-7 my-3">
											<span class="text-danger">MAY1，2018</span>
											<h5 class="text-white my-1">The Dark Tower Trailer</h5>
											<p style="color: gray;" class="my-3">To start he day in the best war，enjoythe extraordinary
												buffetbreakfast
												in the our courtyard caressed at auctor.</p>
										</div>
									</div>
								</div>
								<div class="col-12 ">
									<div class="row ">
										<div class="col-5">
											<div class="overflow-hidden">
												<img src="img/post-23.jpg" class="w-100 m_img_xiao">
											</div>
										</div>
										<div class="col-7">
											<span class="text-danger">MAY1，2018</span>
											<h5 class="text-white my-1">The Dark Tower Trailer</h5>
											<p style="color: gray;" class="my-3">To start he day in the best war，enjoythe extraordinary
												buffetbreakfast
												in the our courtyard caressed at auctor.</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</template>
			</div>
		</div>
		</div>

		<!-- 底部区域 -->
		<div class="py-5 " style="background-color : #000000;">
			<div class="container">
				<div class="row">
					<div class="col-lg-5 col-12 py-5 text-center f_padd">
						<p align="center">
							<a href="javascript:;"><img src="./img/logo-header-05.png" class=""></a>
						</p>
						<p align="center" class="py-3" style="color: gray;">Lommode ligula eget dolor. Aenean meassa.Cum sociis que
							penatibus et
							magnis dis parturient montes lorenm，nascetur ridiculusmus. Donec quam felis， uitricies nex massa.Cum sociis...</p>
						<!-- 按钮组 -->

						<div class="btn-group pt-3" style="width: 85%;">
							<input type="text" placeholder="Email" style="width: 70%; background-color: #222222; border: 1px solid gray; color: gray; outline: none;" />
							<button class="btn text-white font-weight-bold" style="background-color: red;">SUBSCRIBE</button>
						</div>
						<!-- 图标区域 -->
						<ul class="list-unstyled mb-0 d-flex justify-content-around j align-items-center mx-auto py-5" style="width: 70%;">
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-facebook fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-twitter fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-vimeo fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-youtube-play fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-google-plus fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-file-movie-o fa_h"></i></a>
							</li>
						</ul>
					</div>
					<div class="col-lg-4 col-12 py-5 f_padd_2">
						<div class="row">
							<div class="col-12">
								<h5 class="text-white">LATEST POSTS</h5>
							</div>
						</div>
						<div class="row">
							<div class="col-4 py-3">
								<div class="overflow-hidden">
									<img src="img/png-post-01.png" class="w-100 m_img_xiao">
								</div>
							</div>
							<div class="col-8 py-3">
								<p class="text-white mb-0" style="line-height: 22px;">5 Skin Care Rituals You Should Be Doing Before Bed</p>
								<p style="color: gray;">August 11，2018</p>
							</div>
						</div>
						<div class="row">
							<div class="col-4  py-3">
								<div class="overflow-hidden">
									<img src="img/png-post-02.png" class="w-100 m_img_xiao">
								</div>
							</div>
							<div class="col-8 py-3">
								<p class="text-white mb-0" style="line-height: 22px;">Fashion Outfit Ideas to Try From lnstagram This Week</p>
								<p style="color: gray;">August 11，2018</p>
							</div>
						</div>
						<div class="row">
							<div class="col-4 py-3">
								<div class="overflow-hidden">
									<img src="img/png-post-03.png" class="w-100 m_img_xiao">
								</div>
							</div>
							<div class="col-8 py-3">
								<p class="text-white mb-0" style="line-height: 22px;">7 Soaps to Supercharge Your Daily Skincare Routine</p>
								<p style="color: gray;">August 11，2018</p>
							</div>
						</div>
					</div>
					<div class="col-lg-3 col-12 py-5 f_padd_3">
						<h5 class="text-white">POPULAR CATEGORY</h5>
						<ul class="list-unstyled py-3">
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Fragrances</span>
								<span class="text-white">15</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Hair Care</span>
								<span class="text-white">12</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Make Up</span>
								<span class="text-white">6</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Outfits</span>
								<span class="text-white">9</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Skin Care</span>
								<span class="text-white">10</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Style</span>
								<span class="text-white">8</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Fashion</span>
								<span class="text-white">5</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Lifestyle</span>
								<span class="text-white">2</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Weliness</span>
								<span class="text-white">3</span>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 底部简介 -->
		<div class="py-4 border-top text-center" style="border-color: gray !important; background-color: #000000;">
			<p style="color: gray;" class="mb-0">Copyright 2018 Carporate WordPress Theme Theme by <span><a href="javascript:;"
					 style="color: red; text-decoration: none;">ThimPress</a></span></p>
		</div>
		<!--  -->
		<div class="back">返回顶部</div>
	</body>
</html>
<script src="dist/BigPicture.js"></script>
<script src="dist/666.js"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
<script>
	$(".carousel").owlCarousel({
		margin: 10,
		loop: true,
		autoplay: true,
		autoplayTimeout: 2000,
		autoplayHoverPause: true,
		responsive: {
			0: {
				items: 1,
				nav: false
			},
			600: {
				items: 2,
				nav: false
			},
			1000: {
				items: 3,
				nav: false
			}
		}

	})
</script>
<script>
    $(function() {
        $(document).scrollTop();
        //1.被卷去的头部
        var boxTop = $('#mbg').offset().top;
        $(window).scroll(function() {
            // console.log(11);
            console.log($(document).scrollTop());

            if ($(document).scrollTop() >= boxTop) {
                $('.back').fadeIn();
            } else {
                $('.back').fadeOut();
            }
        })

        //返回顶部
        $('.back').click(function() {
            // $(document).scrollTop(0);
            $('body,html').stop().animate({
                scrollTop: 0
            })
        })
    })
</script>
